<template>
  <el-table :data="get_cateList" border style="width: 100%" row-key="id">
    <el-table-column prop="id" label="分类编号" width="180"> </el-table-column>
    <el-table-column prop="catename" label="分类名称" width="180">
    </el-table-column>
    <el-table-column prop="img" label="图片">
      <template v-slot="item">
        <img :src="get_baseUrl + item.row.img" alt="" v-if="item.row.img" />
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态">
      <template v-slot="item">
        <el-button type="primary" plain size="small" v-if="item.row.status == 1"
          >启用</el-button
        >
        <el-button type="danger" plain size="small" v-else>禁用</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="item">
        <el-button type="primary" size="small" @click="edit(item.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="del(item.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {onMounted,computed,ref} from 'vue'
import {useStore} from 'vuex'
const $store = useStore()
const get_baseUrl = ref('http://localhost:3000')
onMounted(()=>{
    action_catelist()
})
const action_catelist = ()=>{
    $store.dispatch('cate/action_catelist')
}
const get_cateList = computed(()=>{
    return $store.getters['cate/get_catelist']
})
const edit =()=>{}
const del = ()=>{}
</script>

<style scoped>
img{width:150px;}
</style>